<template>
  <div class="transcendence-application">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/salvation">超度与救赎</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>超度申请管理</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title">超度申请管理</div>
        <div class="page-subtitle">管理超度申请全流程，从申请到效果评估</div>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="newApplication">
          <PlusOutlined />
          新建申请
        </a-button>
      </div>
    </div>

    <!-- 统计概览 -->
    <div class="stats-overview">
      <a-row :gutter="[20, 20]">
        <a-col :xs="24" :sm="12" :lg="6">
          <div class="stat-card pending">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ overviewStats.pending }}</div>
              <div class="stat-label">待审核申请</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="6">
          <div class="stat-card approved">
            <div class="stat-icon">
              <CheckCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ overviewStats.approved }}</div>
              <div class="stat-label">已批准申请</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="6">
          <div class="stat-card rituals">
            <div class="stat-icon">
              <FireOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ overviewStats.todayRituals }}</div>
              <div class="stat-label">今日仪式</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="6">
          <div class="stat-card success-rate">
            <div class="stat-icon">
              <TrophyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ overviewStats.successRate }}%</div>
              <div class="stat-label">成功率</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能模块 -->
    <div class="modules-section">
      <a-row :gutter="[24, 24]">
        <!-- 超度申请流程 -->
        <a-col :xs="24" :sm="12" :lg="12">
          <div class="module-card application-process" @click="navigateToSubModule('process')">
            <div class="module-header">
              <div class="module-icon">
                <FormOutlined />
              </div>
              <div class="module-info">
                <div class="module-title">超度申请流程</div>
                <div class="module-description">管理超度申请的提交、审核和处理流程</div>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="label">待处理：</span>
                <span class="value">{{ moduleData.process.pending }}</span>
              </div>
              <div class="stat-item">
                <span class="label">已完成：</span>
                <span class="value">{{ moduleData.process.completed }}</span>
              </div>
            </div>
            <div class="module-actions">
              <a-button type="primary" ghost size="small">
                <ArrowRightOutlined />
                进入管理
              </a-button>
            </div>
          </div>
        </a-col>

        <!-- 申请资格审核 -->
        <a-col :xs="24" :sm="12" :lg="12">
          <div class="module-card qualification-review" @click="navigateToSubModule('qualification')">
            <div class="module-header">
              <div class="module-icon">
                <UserOutlined />
              </div>
              <div class="module-info">
                <div class="module-title">申请资格审核</div>
                <div class="module-description">审核亡魂超度资格，确认申请合规性</div>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="label">待审核：</span>
                <span class="value">{{ moduleData.qualification.pending }}</span>
              </div>
              <div class="stat-item">
                <span class="label">通过率：</span>
                <span class="value">{{ moduleData.qualification.passRate }}%</span>
              </div>
            </div>
            <div class="module-actions">
              <a-button type="primary" ghost size="small">
                <ArrowRightOutlined />
                进入管理
              </a-button>
            </div>
          </div>
        </a-col>

        <!-- 超度仪式安排 -->
        <a-col :xs="24" :sm="12" :lg="12">
          <div class="module-card ritual-arrangement" @click="navigateToSubModule('ritual')">
            <div class="module-header">
              <div class="module-icon">
                <CalendarOutlined />
              </div>
              <div class="module-info">
                <div class="module-title">超度仪式安排</div>
                <div class="module-description">安排和管理超度仪式的时间、地点和流程</div>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="label">今日安排：</span>
                <span class="value">{{ moduleData.ritual.today }}</span>
              </div>
              <div class="stat-item">
                <span class="label">本周安排：</span>
                <span class="value">{{ moduleData.ritual.thisWeek }}</span>
              </div>
            </div>
            <div class="module-actions">
              <a-button type="primary" ghost size="small">
                <ArrowRightOutlined />
                进入管理
              </a-button>
            </div>
          </div>
        </a-col>

        <!-- 超度效果评估 -->
        <a-col :xs="24" :sm="12" :lg="12">
          <div class="module-card effect-evaluation" @click="navigateToSubModule('evaluation')">
            <div class="module-header">
              <div class="module-icon">
                <LineChartOutlined />
              </div>
              <div class="module-info">
                <div class="module-title">超度效果评估</div>
                <div class="module-description">评估超度仪式效果，记录和分析结果</div>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="label">待评估：</span>
                <span class="value">{{ moduleData.evaluation.pending }}</span>
              </div>
              <div class="stat-item">
                <span class="label">优秀率：</span>
                <span class="value">{{ moduleData.evaluation.excellentRate }}%</span>
              </div>
            </div>
            <div class="module-actions">
              <a-button type="primary" ghost size="small">
                <ArrowRightOutlined />
                进入管理
              </a-button>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 最近申请和快速操作 -->
    <a-row :gutter="[24, 24]" style="margin-top: 32px">
      <!-- 最近申请 -->
      <a-col :xs="24" :lg="16">
        <div class="section-card">
          <div class="section-header">
            <h3 class="section-title">
              <HistoryOutlined />
              最近申请
            </h3>
            <a-button type="link" @click="viewAllApplications">查看全部</a-button>
          </div>
          <div class="applications-list">
            <div v-for="app in recentApplications" :key="app.id" class="application-item">
              <div class="app-info">
                <div class="app-name">{{ app.name }}</div>
                <div class="app-details">
                  <span class="detail-item">申请人：{{ app.applicant }}</span>
                  <span class="detail-item">申请时间：{{ app.applicationTime }}</span>
                </div>
              </div>
              <div class="app-status">
                <a-tag :color="getStatusColor(app.status)">{{ app.status }}</a-tag>
              </div>
              <div class="app-actions">
                <a-button type="text" size="small" @click="viewApplication(app.id)"> 查看详情 </a-button>
              </div>
            </div>
          </div>
        </div>
      </a-col>

      <!-- 快速操作 -->
      <a-col :xs="24" :lg="8">
        <div class="section-card">
          <div class="section-header">
            <h3 class="section-title">
              <ThunderboltOutlined />
              快速操作
            </h3>
          </div>
          <div class="quick-actions">
            <div class="action-item" @click="quickAction('emergency')">
              <div class="action-icon emergency">
                <ExclamationCircleOutlined />
              </div>
              <div class="action-content">
                <div class="action-title">紧急超度</div>
                <div class="action-desc">处理紧急超度申请</div>
              </div>
            </div>
            <div class="action-item" @click="quickAction('batch')">
              <div class="action-icon batch">
                <AppstoreOutlined />
              </div>
              <div class="action-content">
                <div class="action-title">批量处理</div>
                <div class="action-desc">批量审核申请</div>
              </div>
            </div>
            <div class="action-item" @click="quickAction('schedule')">
              <div class="action-icon schedule">
                <ScheduleOutlined />
              </div>
              <div class="action-content">
                <div class="action-title">仪式排期</div>
                <div class="action-desc">查看仪式安排</div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  PlusOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  FireOutlined,
  TrophyOutlined,
  FormOutlined,
  UserOutlined,
  CalendarOutlined,
  LineChartOutlined,
  ArrowRightOutlined,
  HistoryOutlined,
  ThunderboltOutlined,
  ExclamationCircleOutlined,
  AppstoreOutlined,
  ScheduleOutlined
} from '@ant-design/icons-vue'

const router = useRouter()

// 统计概览数据
const overviewStats = ref({
  pending: 48,
  approved: 36,
  todayRituals: 8,
  successRate: 87.5
})

// 模块数据
const moduleData = ref({
  process: {
    pending: 48,
    completed: 126
  },
  qualification: {
    pending: 23,
    passRate: 92.3
  },
  ritual: {
    today: 8,
    thisWeek: 34
  },
  evaluation: {
    pending: 12,
    excellentRate: 78.5
  }
})

// 最近申请数据
const recentApplications = ref([
  {
    id: 1,
    name: '李某某',
    applicant: '李家长子',
    applicationTime: '2024-01-15 14:30',
    status: '待审核'
  },
  {
    id: 2,
    name: '王某某',
    applicant: '王家二女',
    applicationTime: '2024-01-15 13:45',
    status: '已批准'
  },
  {
    id: 3,
    name: '张某某',
    applicant: '张家三子',
    applicationTime: '2024-01-15 12:20',
    status: '仪式完成'
  },
  {
    id: 4,
    name: '陈某某',
    applicant: '陈家长女',
    applicationTime: '2024-01-15 11:15',
    status: '效果评估中'
  },
  {
    id: 5,
    name: '刘某某',
    applicant: '刘家次子',
    applicationTime: '2024-01-15 10:30',
    status: '已完成'
  }
])

// 导航到子模块
const navigateToSubModule = (module) => {
  switch (module) {
    case 'process':
      router.push('/salvation/transcendence-application/process')
      break
    case 'qualification':
      router.push('/salvation/transcendence-application/qualification')
      break
    case 'ritual':
      router.push('/salvation/transcendence-application/ritual')
      break
    case 'evaluation':
      router.push('/salvation/transcendence-application/evaluation')
      break
  }
}

// 新建申请
const newApplication = () => {
  router.push('/salvation/transcendence-application/new')
}

// 查看所有申请
const viewAllApplications = () => {
  router.push('/salvation/transcendence-application/list')
}

// 查看申请详情
const viewApplication = (id) => {
  router.push(`/salvation/transcendence-application/detail/${id}`)
}

// 快速操作
const quickAction = (action) => {
  switch (action) {
    case 'emergency':
      router.push('/salvation/transcendence-application/emergency')
      break
    case 'batch':
      router.push('/salvation/transcendence-application/batch')
      break
    case 'schedule':
      router.push('/salvation/transcendence-application/schedule')
      break
  }
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colors = {
    待审核: 'orange',
    已批准: 'blue',
    仪式完成: 'green',
    效果评估中: 'purple',
    已完成: 'success',
    已拒绝: 'red'
  }
  return colors[status] || 'default'
}

onMounted(() => {
  console.log('超度申请管理页面已加载')
})
</script>

<style lang="scss" scoped>
.transcendence-application {
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #fff;

  // 面包屑导航
  .breadcrumb {
    margin-bottom: 24px;

    :deep(.ant-breadcrumb-link) {
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: #ffd700;
      }
    }

    :deep(.ant-breadcrumb-separator) {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .header-content {
      .page-title {
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
      }

      .page-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1rem;
      }
    }

    .header-actions {
      .ant-btn {
        height: 40px;
        padding: 0 20px;
      }
    }
  }

  // 统计概览
  .stats-overview {
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;

      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        background: rgba(255, 255, 255, 0.1);
      }

      .stat-content {
        .stat-value {
          font-size: 1.8rem;
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .stat-label {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.9rem;
        }
      }

      &.pending .stat-icon {
        color: #ff9800;
      }
      &.approved .stat-icon {
        color: #2196f3;
      }
      &.rituals .stat-icon {
        color: #f44336;
      }
      &.success-rate .stat-icon {
        color: #4caf50;
      }
    }
  }

  // 功能模块
  .modules-section {
    margin-bottom: 32px;

    .module-card {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      padding: 24px;
      cursor: pointer;
      transition: all 0.3s ease;
      height: 100%;

      .module-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;

        .module-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.8rem;
          background: rgba(255, 255, 255, 0.1);
        }

        .module-info {
          flex: 1;

          .module-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #fff;
            margin-bottom: 8px;
          }

          .module-description {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            line-height: 1.4;
          }
        }
      }

      .module-stats {
        margin-bottom: 20px;

        .stat-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          font-size: 0.9rem;

          .label {
            color: rgba(255, 255, 255, 0.7);
          }

          .value {
            color: #ffd700;
            font-weight: bold;
          }
        }
      }

      .module-actions {
        text-align: right;
      }

      // 不同模块的图标颜色
      &.application-process .module-icon {
        color: #2196f3;
      }
      &.qualification-review .module-icon {
        color: #ff9800;
      }
      &.ritual-arrangement .module-icon {
        color: #e91e63;
      }
      &.effect-evaluation .module-icon {
        color: #4caf50;
      }
    }
  }

  // 通用卡片样式
  .section-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
    height: 100%;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 1.2rem;
        color: #fff;

        .anticon {
          color: #ffd700;
        }
      }
    }
  }

  // 申请列表
  .applications-list {
    .application-item {
      display: flex;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      &:last-child {
        border-bottom: none;
      }

      .app-info {
        flex: 1;

        .app-name {
          font-weight: bold;
          color: #fff;
          font-size: 1rem;
          margin-bottom: 4px;
        }

        .app-details {
          display: flex;
          gap: 16px;
          font-size: 0.8rem;
          color: rgba(255, 255, 255, 0.7);

          .detail-item {
            &:not(:last-child) {
              position: relative;

              &::after {
                content: '|';
                position: absolute;
                right: -8px;
                color: rgba(255, 255, 255, 0.5);
              }
            }
          }
        }
      }

      .app-status {
        margin: 0 16px;
      }

      .app-actions {
        .ant-btn {
          color: #ffd700;

          &:hover {
            color: #fff;
            background: rgba(255, 215, 0, 0.2);
          }
        }
      }
    }
  }

  // 快速操作
  .quick-actions {
    .action-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: 12px;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .action-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;

        &.emergency {
          background: rgba(244, 67, 54, 0.2);
          color: #f44336;
        }

        &.batch {
          background: rgba(33, 150, 243, 0.2);
          color: #2196f3;
        }

        &.schedule {
          background: rgba(156, 39, 176, 0.2);
          color: #9c27b0;
        }
      }

      .action-content {
        .action-title {
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .action-desc {
          font-size: 0.8rem;
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .transcendence-application {
    padding: 16px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-content .page-title {
        font-size: 1.5rem;
      }
    }

    .stat-card {
      flex-direction: column;
      text-align: center;
      gap: 12px;

      .stat-content .stat-value {
        font-size: 1.5rem;
      }
    }

    .module-card .module-header {
      flex-direction: column;
      text-align: center;
      gap: 12px;
    }
  }
}
</style>
